<!--  -->
<template>
  <div id="TakeawayPlatform">
    <div class="hint">
      <hint></hint>
    </div>
    <div class="tpf-hander">
      <div class="tpf-hander-left">外卖平台绑定</div>
      <div class="tpf-hander-right">
        <el-button type="primary" icon="el-icon-refresh" class="refresh"
          >刷新</el-button
        >
      </div>
    </div>
    <div id="tpf-mid">
      <div class="area">
        <div class="area-screening">
          <div class="area-screening-top">
            <p>店铺筛选</p>
          </div>
          <div class="area-screening-bottem">
            <p>店铺名称:</p>
            <el-dropdown trigger="click">
              <span class="el-dropdown-link">
                全部店铺<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>肯德基总店</el-dropdown-item>
                <el-dropdown-item>肯德基1店</el-dropdown-item>
                <el-dropdown-item>肯德基2店</el-dropdown-item>
                <el-dropdown-item>肯德基3店</el-dropdown-item>
                <el-dropdown-item>肯德基4店</el-dropdown-item>
                <el-dropdown-item>肯德基5店</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <el-button type="primary" icon="el-icon-search" class="search"
              >搜索</el-button
            >
          </div>
        </div>
        <div class="area-mid-label">
          <el-tabs type="border-card">
            <el-tab-pane label="饿了么" class="elm-form" >
              <el-button class="elman" icon="el-icon-plus"
                >绑定饿了么店铺</el-button
              >
              <el-table :data="tableData" border style="width: 100%   ">
                <el-table-column prop="date" label="序号" width="180">
                </el-table-column>
                <el-table-column prop="account" label="饿了么账号" width="180">
                </el-table-column>
                <el-table-column prop="name" label="饿了么店铺名称">
                </el-table-column>
                <el-table-column prop="store" label="绑定店铺">
                </el-table-column>
                <el-table-column prop="order" label="是否接单">
                  <el-switch
                    v-model="value"
                    active-color="#3399ff"
                    inactive-color="#cccccc"
                  >
                  </el-switch>
                </el-table-column>
                <el-table-column prop="marki" label="是否发送订单到配送员APP">
                  <el-switch
                    v-model="value"
                    active-color="#3399ff"
                    inactive-color="#cccccc"
                  >
                  </el-switch>
                </el-table-column>
                <el-table-column prop="binding" label="是否绑定">
                  <a href="#" style="color: #6ec5ff">是否绑定</a>
                </el-table-column>
                <el-table-column prop="why" label="失败原因"> </el-table-column>
                <el-table-column prop="time" label="绑定时间">
                  <p>2020-09-03 14:41:23</p>
                </el-table-column>
                <el-table-column prop="operation" label="操作">
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      @click="handleEdit(scope.$index, scope.row)"
                      style="color: #409eff; background-color: white; border: none"
                      ><i icon="el-icon-edit"></i> 编辑</el-button
                    >
                    <el-button
                      size="mini"
                      type="danger"
                      @click="handleDelete(scope.$index, scope.row)"
                      style="color: #409eff; background-color: white; border: none"
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="美团" class="mt-form">
              <el-button class="mtan" icon="el-icon-plus"
                >绑定美团店铺</el-button
              >
              <el-table :data="tableData" border style="width: 100%">
                <el-table-column prop="date" label="序号" width="180">
                </el-table-column>
                <el-table-column
                  prop="account"
                  label="美团外卖店铺账号"
                  width="180"
                >
                </el-table-column>
                <el-table-column prop="name" label="绑定的店铺">
                </el-table-column>

                <el-table-column prop="order" label="是否接单">
                  <el-switch
                    v-model="value"
                    active-color="#3399ff"
                    inactive-color="#cccccc"
                  >
                  </el-switch>
                </el-table-column>
                <el-table-column prop="marki" label="是否发送订单到配送员APP" >
                  <el-switch
                    v-model="tableData.marki"
                    active-color="#3399ff"
                    inactive-color="#cccccc"
                  >
                  </el-switch>
                </el-table-column>
                <el-table-column prop="binding" label="是否绑定">
                  <a href="#" style="color: #6ec5ff">是否绑定</a>
                </el-table-column>
                <el-table-column prop="cjtime" label="创建时间">
                  2020-09-03 14:41:23
                </el-table-column>
                <el-table-column prop="why" label="失败原因"> </el-table-column>
                <el-table-column prop="time" label="绑定时间">
                  <p>2020-09-03 14:41:23</p>
                </el-table-column>
                <el-table-column prop="operation" label="操作">
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      @click="handleEdit(scope.$index, scope.row)"
                      style="color: #409eff; background-color: white; border: none"
                      ><i icon="el-icon-edit"></i> 编辑</el-button
                    >
                    <el-button
                      size="mini"
                      type="danger"
                      @click="handleDelete(scope.$index, scope.row)"
                      style="color: #409eff; background-color: white; border: none"
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-pagination background layout="prev, pager, next" :total="1000" style="margin-top:10px;float:right">
          </el-pagination>
          </el-tabs>
          
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import hint from "./header";

export default {
  //import引入的组件需要注入到对象中才能使用
  name: "TakeawayPlatform",
  components: {
    hint: hint,
  },
  data() {
    //这里存放数据
    return {
      value: true,
      tableData: [
        {
          date: "1",
          account: "13021513249",
          name: "肯德基总店",
          store: "肯德基总店",
          order: "",
          marki:true,
          binding: "",
          why: "",
          time: "",
          operation: "",
       
        },
        {
          date: "2",
          account: "13021513249",
          name: "肯德基总店",
          store: "肯德基总店",
          order: "",
          marki: "",
          binding: "",
          why: "",
          time: "",
          operation: "",
        },
        {
          date: "3",
          account: "13021513249",
          name: "肯德基总店",
          store: "肯德基总店",
          order: "",
          marki: "",
          binding: "",
          why: "",
          time: "",
          operation: "",
        },
        {
          date: "6",
          account: "13021513249",
          name: "肯德基总店",
          store: "肯德基总店",
          order: "",
          marki: "",
          binding: "",
          why: "",
          time: "",
          operation: "",
        },
        {
          date: "7",
          account: "13021513249",
          name: "肯德基总店",
          store: "肯德基总店",
          order: "",
          marki: "",
          binding: "",
          why: "",
          time: "",
          operation: "",
          cjtime: "",
        },
      ],
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
 
    handleDelete(index) {
     this.tableData.splice(index,1)
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
  text-decoration: none;
}
#TakeawayPlatform #tpf-mid[data-v-63eb54a6] {
  background-color: #f5f5f5;
}
#TakeawayPlatform {
  .tpf-hander {
    display: flex;
    box-sizing: border-box;
    justify-content: space-between;
    width: 100%;
    height: 50px;
    background-color: white;
    .tpf-hander-left {
      width: 120px;
      height: 20px;
      border-left: 4px solid #0079fe;
      margin-left: 100px;
      padding-left: 5px;
      color: #9d9e9e;
      font-weight: 700;
    }

    .tpf-hander-right {
      width: 62px;
      height: 26px;
      .refresh {
        width: 62px;
        height: 26px;
        background-color: white;
        color: #999999;
        border: 1px solid #ddd;
        margin-left: -350px;
      }
    }
  }
  #tpf-mid {
    display: flex;
    box-sizing: border-box;
    flex-wrap: wrap;
    width: 100%;
    min-height: 800px;
    padding-top: 50px;
    .area {
      width: 1390px;
      height: 800px;
      margin: 0 auto;
      .area-screening {
        width: 100%;
        height: 120px;
        border: 1px solid #ddd;
        background-color: white;
        .area-screening-top {
          width: 100%;
          height: 48px;
          border-bottom: 1px solid #ddd;
          line-height: 48px;
          p {
            font-weight: 700;
            padding-left: 10px;
            color: #746866;
          }
        }

        .area-screening-bottem {
          display: flex;
          width: 100%;
          height: 70px;
          line-height: 70px;
          p {
            font-size: 12px;
            padding-left: 10px;
          }
          .el-dropdown {
            width: 225px;
            height: 36px;
            margin-top: 18px;
            line-height: 36px;
            margin-left: 5px;
            border: 1px solid #ddd;
            appearance: none;
            -moz-appearance: none;
            -webkit-appearance: none;
            i {
              float: right;
              line-height: 36px;
              padding-right: 5px;
            }
            .el-dropdown-menu__item {
              width: 225px;
              height: 36px;
              padding-left: 10px;
            }
          }
          .search {
            width: 80px;
            height: 35px;
            margin-left: 30px;
            margin-top: 18px;
          }
        }
      }
      .area-mid-label {
        width: 100%px;
        min-height: 800px;
        el-tabs {
          width: 100%px;
          min-height: 800px;
          .elm-form {
            position: relative;
            button {
              width: 150px;
              height: 36px;
            }
          }

          .mt-form {
            position: relative;
            button {
              width: 150px;
              height: 36px;
            }
          }
        }
      }
    }
  }
}
.elman {
  float: right;
  width: 150px;
  height: 36px;
  background-color: #409eff;
  border: none;
  color: white;
}
.mtan {
  float: right;
  width: 150px;
  height: 36px;
  background-color: #409eff;
  border: none;
  color: white;
}
li.el-dropdown-menu__item {
  width: 225px;
}
</style>